<template>
  <view :class="theme">

    <view class="fixed bg-base justify-center"
      style="padding: 0 12rpx; height: 100px; z-index: 1; left: var(--window-left); right: var(--window-right); top: var(--window-top);">
      <view class="bg-base flex-row items-center" style="height: 36px;">
        <view class="flex-1 flex-row items-center bg-base b-rounded-40 ml-18 mr-10"
          :style="{ border: `2rpx solid ${$config.COLOR_STRESS}`, padding: `2px` }">
          <uv-icon class="ml-20" size="40" name="search" :color="$config.COLOR_PLACEHOLDER" />
          <input v-model="goods.keywords" @confirm="search" :focus="false" style="height: 30px;"
            class="flex-1 text-28 pl-12 pr-12" type="text" placeholder="输入搜索关键词" placeholder-class="color-placeholder" />
          <button @click="search" hover-class="op-[0.6]" class="bg-primary color-base b-rounded-40 text-28"
            style="line-height: 30px;">搜索</button>
        </view>
      </view>

      <view class="bg-base flex-row items-center text-28 justify-between" style="height: 54px;">
        <view v-for="(item, key) in sortTypes" :key="key" @click="switchSort(key)"
          class="flex-row items-center justify-center" style="width: 210rpx; padding: 30rpx 0;">
          <text :class="{ 'color-stress': goods.sortType === key }">{{ item.text }}</text>
          <view v-if="key !== 'all'" class="ml-6">
            <view class="b-rounded-6" :style="{
              border: `10rpx solid transparent`,
              borderBottomColor: `${goods.sortType === key ? (sortTypes[key].type ? $config.COLOR_WHITE : $config.COLOR_STRESS) : $config.COLOR_WHITE}`
            }" />
            <view class="mt-4 b-rounded-6" :style="{
              border: `10rpx solid transparent`,
              borderTopColor: `${goods.sortType === key ? (sortTypes[key].type ? $config.COLOR_STRESS : $config.COLOR_WHITE) : $config.COLOR_WHITE}`
            }" />
          </view>
        </view>
      </view>
    </view>

    <view class="flex-row flex-wrap" style="margin: 100px 30rpx 30rpx;">
      <store-goods-item v-for="(item, index) in goods.list" :key="index" :item="item" :index="index" />
    </view>

    <view class="mt-30 mb-30 items-center">
      <uv-image v-if="!goods.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
        src="/static/img/blank.png" mode="aspectFit" />
      <uv-load-more :status="goods.cache.status" />
    </view>

  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { reactive } from "vue";
import { pager, debounce } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const sortTypes = reactive({
  all: {
    text: "综合",
    type: -1,
    fields: null,
  },
  sales: {
    text: "销量",
    type: 0,
    fields: [5, 6],
  },
  price: {
    text: "价格",
    type: 0,
    fields: [3, 4],
  },
});

const goods = reactive({
  list: [] as any[],
  keywords: "",
  page: 0,
  limit: 20,
  id: null,
  type: null,
  sortType: "all" as keyof typeof sortTypes,
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
});

onLoad(({ id, title, type }: any) => {
  title && uni.setNavigationBarTitle({ title });
  id && (goods.id = id);
  type && (goods.type = type);
  search();
});

const search = () => {
  goods.page = 0;
  goods.list = [];
  goods.cache = {
    page: 1,
    list: [],
    status: "nomore"
  };
  goods.next = false;
  getGoods();
}

onReachBottom(() => getGoods());

const getGoods = () => {
  const { fields, type } = sortTypes[goods.sortType];

  pager({ url: "/goodsLists", data: { keywords: goods.keywords, type: goods.id, sort: fields?.[type] } }, goods);
}

const switchSort = debounce((type: keyof typeof sortTypes) => {
  if (goods.cache.status === "loading") return;
  if (goods.sortType === type) {
    if (type === "all") return;
    sortTypes[type].type = +!sortTypes[type].type;
  }
  goods.sortType = type;
  search();
});

</script>

<style lang="scss" scoped>
// scss
</style>